<template>
<div style="margin-top: 70px">
    <el-row>
        <el-col style="position: relative" :span="4" v-for="(o, index) in tableData" :key="o" :offset="1">
            <el-card style="margin-bottom: 20px" :body-style="{ padding: '0px' }">
                <img :src="o.picture" style="width: 120px;height: 70px" class="image">
                <div style="padding: 14px;">
                    <span style="font-weight: 700">{{ o.name }}</span>
                    <br>
                    <span> ￥{{ o.price }}</span>
                    <br>
                    <span style="font-weight: 300;font-size: 12px"> {{ o.description }}</span>
                    <div class="bottom clearfix">
                        <el-button v-if="o.count === 0" type="text" class="button" @click="addcar(index)">加购物车</el-button>
                        <div v-else>
                            <el-button @click="jiancar(index)" type="primary" icon="el-icon-minus" circle size="mini"></el-button>
                        {{o.count}}
                            <el-button @click="addcar(index)" type="primary" icon="el-icon-plus" circle size="mini"></el-button>
                        </div>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>

    <div style="border: 1px slategrey solid;width: 100vw;position: fixed;bottom: 0px;display: flex" >
        <el-badge style="margin-left: 30px" :value="carcount" class="item">
            <el-button :disabled="sum === 0" @click="drawer = true" type="primary" icon="el-icon-shopping-cart-full" circle></el-button>
        </el-badge>
        <div style="margin-left: 50px;margin-top: 10px">
            总价格：￥ {{sum}}
        </div>
        <div>
            <el-button :disabled="sum === 0" @click="submit" style="margin-left: 70px;margin-top: 5px" size="mini" type="primary" >去结算
            </el-button>
        </div>
    </div>

    <el-drawer
        title="购物车"
        :visible.sync="drawer"
        direction="btt">
        <div style="display: flex;margin-left: 70px;margin-top: 10px;position: relative;" v-for="(item,index) in tableData" v-if="item.count != 0">
            <el-avatar  :size="45" :src="item.picture" shape="square"></el-avatar>
            <div style="margin-left: 20px;margin-top: 10px"> {{item.name}}</div>
                <div style="margin-left: 20px;margin-top: 10px"> ￥{{item.count * item.price}}</div>

            <div style="position: absolute;left: 450px;margin-top: 10px">
                <el-button @click="jiancar(index)" type="primary" icon="el-icon-minus" circle size="mini"></el-button>
                {{item.count}}
                <el-button @click="addcar(index)" type="primary" icon="el-icon-plus" circle size="mini"></el-button>
            </div>
            <el-button style="position: absolute;left: 550px;margin-top: 10px" type="danger" size="mini" slot="reference">删除</el-button>
        </div>

        <div style="margin-left: 50px;margin-top: 10px;position: absolute">
            总价格：￥ {{sum}}
        </div>
        <div>
            <el-button  style="margin-left: 70px;margin-top: 5px" size="mini" type="primary" @click="submit">去结算
            </el-button>
        </div>
    </el-drawer>
</div>
</template>

<script>
import request from "@/request";
import Vue from "vue";

export default {
    name: "diancan",
    data(){
        return{

            drawer: false,
            car: [],
            //后端返回的数据
            tableData: [],
            total:0,
            params: {
                pageNum: 1,
            },
        }
    },
    computed: {
        carcount () {
            let count = 0
            for (let i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].count > 0){
                    count ++
                }
            }
            return  count
        },
        sum () {
            let sum = 0
            for (let i = 0; i < this.tableData.length; i++) {
                sum += this.tableData[i].count * this.tableData[i].price
            }
            return  sum
        }
    },
    mounted() {
        if (!(this.$store.state.islogin)) {
            this.$message.warning("清先登录")
            this.$router.push("/userlogin")
        }
        this.init()
    },
    methods:{
        init(){
            request.get('/caipin/page', {
                params: this.params
            }).then(res => {
                if (res.code === "200") {
                    this.total = res.data.total;
                    this.tableData = res.data.list;
                    for (let i = 0; i < this.tableData.length; i++) {
                        Vue.set(this.tableData[i], 'count', 0)
                    }
                }
            })
        },
        submit(){
            const params = []
            for (const argument of this.tableData) {
                if (argument.count !== 0){
                    params.push(argument)
                }
            }
            let userId = JSON.parse(window.localStorage.getItem('user')).userId
            console.log(userId)
            request.post("/diancan/submit/"+ userId+"/"+this.sum,params).then(res => {
                this.$message.success("订单提交成功！价格为" + this.sum + '元')
            })
        },
        addcar(index){
            this.tableData[index].count ++

            console.log(this.tableData)
        },
        jiancar(index){
            this.tableData[index].count --

            console.log(this.tableData)
        },
    }

}
</script>

<style scoped>

</style>